<template>
    <view class="viewBg">
        <view class="lineH20"></view>
        <!-- 选择网格员 -->
        <view class="uni-list" v-if="showSelectUser">
            <view class="uni-list-cell">
                <view class="uni-list-cell-navigate uni-navigate-right" @click="showPicker">
                    <text class="cell-text">选择网格员</text>
                    <text class="cell-detail">{{selectedLabel}}</text>
                </view>
            </view>
        </view>


        <view class="selectDate" @click="onShowDatePicker">
            <image src="../../../static/img/calendar.png" mode="scaleToFill" style="width: 45upx;height: 45upx;"></image>
            <!-- <text class="dateText">{{selectedDate}}</text> -->
            <view class="uni-list-cell-db">
                <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
                    <view class="uni-input">{{date}}</view>
                </picker>
            </view>
        </view>
        <view class="lineH1"></view>
        <button type="primary" @tap="checkUserPath">查看巡查信息</button>
        <view class="lineH20"></view>
        <view class="lyx-content">
            <view class="lyx-content-box" v-for="(item,index) in resultData.addresslist" :key="index">
                <view class="col flex2">
                    <view>网格员：{{item.name}}</view>
                    <view>{{item.create_time}}</view>
                </view>
                <view class="col">打卡地点：{{item.address}}</view>
                <view class="col imageBg">
<!--                    <view v-for="(item,index) in images" :key="index">-->
                        <image class="image" :src="item.photo" mode="aspectFill" @click="previewImage([item.photo],0)"></image>
<!--                    </view>-->
                </view>
            </view>
        </view>

        <mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
                      @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
        <!-- <mx-datepicker  v-model="showPicker" :init="initDate" type="date" @selected="onSelected" /> -->
    </view>

</template>

<script>
	import mpvuePicker from "@/components/mpvue-picker/mpvuePicker.vue"
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"

	var util = require('../../../common/util.js');
	var formatLocation = util.formatLocation;

	export default {
		components: {
			uniIcon,
			mpvuePicker,
			uniSegmentedControl
		},
		data () {
			const currentDate = this.getDate({
				format: true
			});

			return {
				showSelectUser: false,
				showMap: true,
				themeColor: '#007AFF',
				pickerValueDefault: [0],
				mode: '',
				pickerValueArray: [],
				selectedLabel: "请选择",
				selectedValue: 0,
				location: {},
				current: 0,
				activeColor: '#007aff',
				styleType: 'button',

				date: currentDate,

				//列表
				listFirst: null,
				list: null,
				listLast: null,
                resultData:[]

			};
		},
		computed: {
			startDate () {
				return this.getDate('start');
			},
			endDate () {
				return this.getDate('end');
			}
		},

		onLoad () {
			var userInfo = getApp().globalData.userInfo;
			if (userInfo.role === 'WGZ') {
				this.showSelectUser = true;
			} else {
				this.showSelectUser = false;
			}
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					console.log(res.longitude, res.latitude);
					this.location = {
						longitude: res.longitude,
						latitude: res.latitude
					};
					// this.location = formatLocation(res.longitude, res.latitude)
					console.log("经度" + this.location.latitude + "维度" + this.location.longitude);
				}
			})
		},
		methods: {
			showPicker () {
				this.showMap = false;
				if (this.pickerValueArray.length == 0) {
					this.$http.get('ac/xagrid/appGridUserService/getGridUsers', { //选择网格员
						pageNo: 1,
						pageSize: 10000
					}).then((res) => {
						var tempList = new Array();
						for (var i = 0; i < res.data.results.length; i++) {
							tempList.push({
								label: res.data.results[i].name,
								value: res.data.results[i].name
							});
						}

						this.pickerValueArray = tempList;
						this.$refs.mpvuePicker.show();
					});
				} else {
					this.$refs.mpvuePicker.show();
				}
				this.mode = 'selector';
				this.deepLength = 1;
				this.pickerValueDefault = [0];

			},

			onConfirm (e) {
				this.showMap = true;
				this.selectedLabel = e.label;
				this.selectedValue = e.value;

			},
			checkUserPath () {
				var that = this;
				if (this.showSelectUser && this.selectedValue === 0) {
					uni.showToast({
						title: '请选择网格员'
					})
					return;
				}
				let params = {create_time:this.date};
				//let params = {};
				if (this.selectedValue !== 0) {
					params.name = String(this.selectedValue);
				}
				this.$http.post('ac/xagrid/appInpectService/InpectList', params).then((res) => {
                    if(res.errcode == 0) {
                    	if(res.data.length > 0) {
                    		res.data[0].addresslist.forEach(item=>{
                              item.photo = this.imgFullUrl(item.photo)
                            })
                    	    this.resultData = res.data[0]
                        }else {
                           this.resultData = []
                            uni.showToast({
                                title: '没有数据'
                            })
                        }
                    }else{
	                    uni.showToast({
		                    title: '网络出错了'
	                    })
                    }
				})
			},
			bindDateChange: function (e) {
				this.date = e.target.value

			},

			getDate (type) {
				const date = new Date();

				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;
			},
			previewImage (imgs,index) {
				uni.previewImage({
					urls: imgs,
					current: String(index),
				})
			},
            imgFullUrl(data) {
                return 'http://image.tripln.top/gridfile'+data
            }
		}
	}
</script>

<style>
    .viewBg {
        width: 100%;
        height: 100%;
        /* background-color: #0FAEFF; */
    }

    .cell-detail {
        margin-right: 20upx;
    }

    .uni-list-cell-navigate {
        justify-content: space-between;
    }

    .selectDate {
        padding: 20upx;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .lineH20 {
        height: 20upx;
        width: 100%;
        background-color: #F7F7F7;
    }

    .lineH1 {

        height: 2upx;
        width: 100%;
        /* margin-left: 10upx; */
        background-color: #F7F7F7;
    }

    button {
        /* margin-top: 30upx; */
        /* margin-bottom: 30upx; */
        margin: 30upx;
    }

    map {
        width: 100%;
        height: 700upx;
    }
    .lyx-content{
        margin: 20upx;
    }
    .lyx-content-box{
        margin: 2px;
    }
    .lyx-content-box .col{
        width: 100%;
    }
    .lyx-content-box .col .img{
        width: 28%;
    }
    .lyx-content-box .flex2{
        display: flex;
        justify-content: space-between;
    }
    .imageBg {
        width: 100%;
        height: 100%;
        /*display: flex;*/
        /*flex-direction: row;*/
        /* margin: default; */
        /*flex-wrap: wrap;*/
    }

    .image {
        width: 150upx;
        height: 150upx;
        margin: 10upx;
    }

</style>
